<template>
  <div class="_mbbox boxgap">
    <div class="nbox1">
      <div class="select_gap">
        <n-input
          placeholder="公会名称"
          v-model:value="val.sea_guild"
          @input="set.seasub"
        />
        <n-input
          placeholder="成员名称"
          v-model:value="val.sea_username"
          @input="set.seasub"
        />
      </div>
      <div class="page">
        <div @click="set.page(1)">首页</div>
        <van-pagination
          @change="set.page"
          v-model="val.page"
          :page-count="val.maxpage"
          :show-prev-button="false"
          :show-next-button="false"
        />
        <div>-</div>
      </div>
      <div class="guild_gap">
        <div
          @click="set.ckguild(item.guild_id, item.gid)"
          v-for="item in val.data"
          class="guildbox"
        >
          <div class="_gname">{{ item.guild_name }}</div>
          <div class="_font">伤害{{ item.mcdmg?.toLocaleString() }}</div>
        </div>
      </div>
      <div class="page">
        <div @click="set.page(1)">首页</div>
        <van-pagination
          @change="set.page"
          v-model="val.page"
          :page-count="val.maxpage"
          :show-prev-button="false"
          :show-next-button="false"
        />
        <div>-</div>
      </div>
    </div>
  </div>
</template>
<style scoped>
._font {
  font-size: 0.9em;
  color: var(--base-font-hover-color);
  text-shadow: 0 0 3px #000;
}

._gname {
  font-size: 1.1em;
  color: var(--text-color);
  text-shadow: 0 0 3px #000;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 0.2em;
}

.guild_gap {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}

.guildbox {
  cursor: pointer;
  display: flex;
  padding: 0.5em;
  border-radius: 0.25em;
  position: relative;
  background: var(--bg5);
  transition: 0.2s ease-in-out;
  align-items: center;
  gap: 0.35em;
  height: 100%;
  flex-direction: column;
  min-height: 8em;
  justify-content: center;
}

@media (max-width: 428px) {
  .guild_gap {
    gap: var(--def-05em);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    font-size: 3.25vw;
  }
}
</style>
<script>
import { cfg } from "@/cfg/cfg.js";
export default {
  props: {},
  setup(props) {
    const set = {
      ckguild: (gid, gid2) => {
        cfg.guild_gid = gid2;
        cfg.guild_id = gid;
        localStorage.setItem("guild_id", gid);
        localStorage.setItem("guild_gid", gid2);
        cfg.router.replace({
          params: {
            guild_id: cfg.guild_id,
          },
        });
      },
      page: (page) => {
        val.page = page;
        set.get_list();
      },
      seasub: () => {
        set.get_list();
      },
      get_list: async () => {
        try {
          const back = await cfg.mget({
            url: `${cfg.url2}api/guild`,
            query: {
              type: "get_guild_list",
              seaname: val.sea_guild,
              seausername: val.sea_username,
              page: val.page,
            },
          });
          if (back.code == 0) {
            val.data = back.data.data;
            val.maxpage = back.data.maxpage;
          } else {
            throw { code: -1, message: back.msg };
          }
        } catch (e) {
          cfg.alert3({
            message: e.message,
          });
        }
      },
    };
    const val = reactive({
      page: 1,
      data: [],
      sea_username: cfg.route.query.sea_user ?? null,
      sea_guild: cfg.route.query.sea_guild ?? null,
    });
    onMounted(async () => {
      await set.get_list();
    });
    return { cfg, set, val };
  },
};
</script>
